import React from 'react';
import { message } from 'antd';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import Api from 'Utils/api';
import InteractionDetail from '../../Components/InteractionDetail';
import './index.scss';

class GovDetail extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      title: '历史预约详情',
      content: ''
    };

    this.getSpeak = ::this.getSpeak;
    this.returnHandle = ::this.returnHandle;
  }
  componentWillMount() {
    this.getSpeak();
  }
  getSpeak() {
    const api = new Api({
      method: 'GET',
      path: `/randoms/user/${this.props.params.id}`,
      success: (json) => {
        this.setState({
          content: json
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  returnHandle() {
    this.props.dispatch(routerActions.goBack());
  }
  showState(state) {
    if (state === 0) {
      return {
        label: '未处理',
        color: '#F35E49'
      };
    } else if (state === 1) {
      return {
        label: '处理中',
        color: '#F1870B'
      };
    }
    return {
      label: '已处理',
      color: '#292929'
    };
  }
  render() {
    const { title, content } = this.state;
    const state = this.showState(content.state);
    return (
      <div>
        <InteractionDetail
          title={title}
          content={
            <div className="appoint-detail-page">
              <div className="item">
                <span>商家名称：</span>
                <span>
                  {
                    content && content.company_name ? content.company_name : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>类别：</span>
                <span>
                  {
                    content && content.type ? content.type : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>申请回避人员：</span>
                <span>
                  {
                    content && content.evade_executor ? content.evade_executor : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>执法人员：</span>
                <span>
                  {
                    content && content.law_executor1 ? content.law_executor1 : ''
                  }
                  {
                    content && content.law_executor2 ? `、${content.law_executor2}` : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>检查内容：</span>
                <span className="content">
                  {
                    content && content.content ? <span dangerouslySetInnerHTML={{ __html: content.content.replace(/\n/g, '<br/>') }} /> : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>状态：</span>
                <span style={{ color: state.color }}>
                  {
                    content && content.state ? state.label : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>检查结果：</span>
                <span style={{ color: content.handle_result ? '#49C42A' : '#E89937' }}>
                  {
                    content && content.handle_result ? '合格' : '不合格'
                  }
                </span>
              </div>
            </div>
          }
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}
export default connect(mapStateToProps)(GovDetail);
